<template>
	<view class="px30 py30 bg-fff">
		<view class="py20 fs30"> {{ $t('备注信息') }}</view>
		<u-input v-model="remark" type="textarea" :placeholder="$t('输入备注信息')" border :maxlength="100" />

		<view class="input-item" v-for="(item, index) in list" :key="index">
			<view class="title">{{ item.title }}</view>
			<view class="label-box">
				<view
					class="label"
					:class="{ 'active': groupActive(itm.title) }"
					v-for="(itm, idx) in item.child" :key="idx"
					@click="groupChange(itm.title,itm.id)"
				>{{ itm.title }}</view>
			</view>
		</view>
		<!-- <u-checkbox-group @change="checkboxGroupChange">
			<u-checkbox class="mb20 " v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.id">
				<span class="mb20"> {{ item.title }}</span>
			</u-checkbox>
		</u-checkbox-group> -->

		<view class="mt40">
			<u-button type="primary" @click="submit">{{ $t('提交') }}</u-button>
		</view>

		<view class="mt30 pb30" v-if="userInfo.service_apply_status === '驳回'">
			<view>
				{{ $t('审核状态') }}: {{ userInfo.service_apply_status }}
			</view>
			<view class="mt20">
				{{ $t('驳回原因') }} :{{ userInfo.service_apply_reason }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				service_cate: '',
				remark: '',
				userInfo: {},
                checked_service_data:[],
				groupSecondary: [],
			}
		},
		onLoad() {
			this.getUserInfo()
			this.get_service_cate()
		},

		methods: {
			submit() {
				uni.$u.api.edit_service_cate({
					service_cate: this.checked_service_data,
					remark: this.remark
				}).then(res => {
					uni.$u.toast(res.msg)
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/mine/index'
						});
					}, 1500)
				})
			},
			get_service_cate() {
				this.$u.api.service_cate().then(res => {
					this.list = res.data
					const serviceList = this.service_cate.split(',')
					this.list.forEach(item => {
						item.child.forEach(item_child => {
							if (serviceList.includes(item_child.id + '')){
								this.groupSecondary.push(item_child.title)
								this.checked_service_data.push(item_child.id)
							} 
						})
					})
				})
			},
			checkboxGroupChange(e) {
				this.service_cate = e.join(',')
			},
			getUserInfo() {
				this.$u.api.material().then(res => {
					this.userInfo = res.data.data
					this.service_cate = res.data.data.service_cate;
					this.checked_service_data = res.data.data.service_cate_arr;
				});
			},
			groupChange (title,id) {
				const index = this.groupSecondary.indexOf(title)
				const index_id = this.checked_service_data.indexOf(id)
				if (index === -1) {
					this.groupSecondary.push(title)
				} else {
					this.groupSecondary.splice(index, 1)
				}
				if (index_id === -1) {
					this.checked_service_data.push(id)
				} else {
					this.checked_service_data.splice(index_id, 1)
				}
				console.log(this.checked_service_data);
			}
		},
		computed: {
			groupActive () {
				return (item) => {
					return this.groupSecondary.some(itm => itm === item)
				}
			}
		}
	}
</script>
<style scoped lang="scss">
page {
	background: #f8f8f8
}
.input-item {
	padding: 20rpx 0;
	.title {
		font-size: 30rpx;
	}
	.label-box {
		margin-top: 12rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		.label {
			border-radius: 8rpx;
			border: 1rpx solid #8e9299;
			padding: 8rpx 24rpx;
			color: #6b6e73;
			font-size: 26rpx;
			background-color: #f2f7ff;
			&.active {
				color: #fff;
				border-color: #2979ff;
				background-color: #2979ff;
			}
		}
	}
}
</style>
